<template>
<div id="index" class="index">
  <div id="header" class="header">
    <div id="sidebar" class="sidebar"><div id="controlBtn" class="control_btn"></div></div>
  </div>

  <div id="body" class="body">
    <div id="title" class="title">
      <img src="\image\title.png"/>
    </div>
    <div id="search" class="search">
      <div id="input_zone" class="input_zone" >
        <input placeholder="还要多远才能进入你的心">
      </div>
      <div id="button_zone" class="button_zone">
        <a-button shape="circle" icon="search" style="width: 45px; height: 45px"/>
      </div>
    </div>
  </div>
</div>
  
</template>

<script>
export default {
  methods:{
    mounted(){
      $('#controlBtn').switchAnimation('click', false, {
                targets:[
                    {
                        target: '#sidebar',
                        status1Classes: 'sidebarShow',
                        status2Classes: 'sidebarHide'
                    },

                    {
                        target: '#controlBtn',
                        status1Classes: 'ctrlBtnStat1',
                        status2Classes: 'ctrlBtnStat2'
                    }
                ],
            });
    }
  } 
}
</script>

<style lang="scss" scoped>
.index{
  width: 100%;
  height: 100%;
  display: block;
  background-image: url("..\\static\\image\\background.png");
  background-repeat: no-repeat;
  background-size: 100%;
  .header{
    // background-color: black;
    width: 100%;
    height: 80px;
    border-bottom-right-radius: 20px;
    .sidebar
      {
          height: 570px;
          position: absolute;
          right: 0;
          width: 20%;
          transform: translateX(100%);
          background-color: rgba(0, 0, 0, 0);
          backdrop-filter: brightness(0.5);
      }
    @keyframes sidebarShow
      {
          0%
          {
              transform: translateX(100%);
          }

          100%
          {
              transform: translateX(0);
          }
      }

      .sidebarShow
      {
          animation: sidebarShow 0.5s cubic-bezier(.75,.2,.27,.83) forwards;
      }

      @keyframes sidebarHide
      {
          0%
          {
              transform: translateX(0);
          }

          100%
          {
              transform: translateX(100%);
          }
      }

      .sidebarHide
      {
          animation: sidebarHide 0.5s cubic-bezier(.75,.2,.27,.83) forwards;
      }
      
      .control_btn
      {
          position: absolute;
          left: -50px;
          top: 30px;
          width: 30px;
          height: 16px;
          cursor: pointer;
          border-top: 4px solid black;
      }

      @keyframes ctrlBtnStat2
      {
          0%
          {
              transform: rotate(90deg);
          }

          100%
          {
              transform: rotate(0deg);
          }
      }

      .ctrlBtnStat2
      {
          animation: ctrlBtnStat2 0.5s cubic-bezier(.75,.2,.27,.83) forwards;
      }

      @keyframes ctrlBtnStat1
      {
          0%
          {
              transform: rotate(0deg);
          }

          100%
          {
              transform: rotate(90deg);
          }
      }

      .ctrlBtnStat1
      {
          animation: ctrlBtnStat1 0.5s cubic-bezier(.75,.2,.27,.83) forwards;
      }

      .control_btn::before
      {
          position: absolute;
          top: 6px;
          left: 0;
          content: '';
          display: block;
          height: 6px;
          width: 100%;
          border-top: 4px solid black;
          border-bottom: 4px solid black;
      }
  }
  .body{
    margin-top: 140px;
    display: flex;
    width: 100%;
    height: 570px;
    flex-direction: column;
    .title{
      margin: auto;
      img{
        width: 400px;
        height: 80px;
      }
    }
    .search{
      margin: auto;
      margin-bottom: 435px;
      display: flex;
      .input_zone{
        margin: auto;
        input{
          margin: auto;
          margin-top: 20px;
          left: 43px;
          top: 320px;
          width: 468px;
          height: 55px;
          border-radius: 59px;
          color: rgba(102, 100, 130, 100);
          font-size: 14px;
          text-align: center;
          font-family: Microsoft Yahei;
          border: 1px solid rgba(26, 55, 81, 100);
        }
      }
    .button_zone{
      margin: auto;
      margin-left: 20px;
      margin-top: 25px;
      width: 40px;
      height: 40px;
    }
    }
  }
}
  
</style>
